<template>
  <div class="talk-box">
    <div class="wrap">
      <div class="title">
        <p class="name">聊聊</p>
        <p class="decorate">
          ——— <span class="iconfont search-icon">&#xe601;</span> ———
        </p>
        <p class="desc">CHATING</p>
      </div>
      <div class="talk-box-swiper">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide
            v-for="(item1, index1) in talkArr.length / 6"
            :key="index1"
          >
            <ul class="list">
              <li v-for="(item, index) in talkArr0" :key="index">
                <div class="qiu">生活{{ index + 1 }}</div>
                <div class="talk-text">
                  <a href="##">
                    <h3 class="talk-name">{{ item.title }}</h3>
                    <p class="talk-desc">{{ item.content }}</p>
                  </a>
                </div>
              </li>
            </ul>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 同HomeMovement bug
      talkArr: [],
      talkArr0: [],

      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        loop: true,
        // Some Swiper option/callback...
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.$api.HomeChating().then((res) => {
      if (res.data.success === true) {
        var arr = res.data.chating;
        for (var i = 0; i < 6; i++) {
          // for (var k = 0 * 4; k < 4; k++) {  // 有个bug
          this.talkArr0[i] = arr[i];
          // }
        }
        this.talkArr = res.data.chating;
      }
    });
    this.swiper.slideTo(1, 1000, false);
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 1200px;
  margin: 0 auto;
}
.talk-box {
  background-color: #f5f5f5;
  overflow: hidden;
  text-align: left;
}
.title {
  width: 140px;
  height: 73px;
  margin: 40px auto 0;
  text-align: center;
  .name {
    color: #292929;
    margin-bottom: 5px;
    font-size: 24px;
  }
  .decorate {
    opacity: 0.1;
  }
  .desc {
    color: #292929;
    margin-bottom: 5px;
  }
}
.swiper-container {
  --swiper-pagination-color: #00ff33;
}
.talk-box-swiper {
  margin: 50px 0 20px;
  text-align: left;
}
.list {
  height: 270px;
  li {
    width: 360px;
    height: 60px;
    padding: 20px;
    float: left;
  }
  .qiu {
    width: 53px;
    height: 53px;
    line-height: 53px;
    border-radius: 50%;
    background-color: #42cbf8;
    color: #fff;
    text-align: center;
    float: left;
  }
  .talk-text {
    float: left;
    margin: 10px 0 0 10px;
    width: 295px;
    .talk-name {
      font-size: 16px;
      color: #000;
    }
    .talk-desc {
      font-size: 14px;
      color: #999;
    }
  }
}
</style>